<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看作业详情</title>
    <link rel="stylesheet" type="text/css"
          href="../bootstrap/bootstrap.4.1.0.css">
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
    <script src="../bootstrap/popper.12.5.min.js"></script>
    <script src="../bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="../layui/layer/layer.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
    <style>
        .vacancy {
            border: none;
        / / 去除边框 border-radius: 0;
            border-bottom: #8D8D8D 1px solid;
            box-shadow: 0px 0px 0px 0px;
        / / 去除阴影
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <div v-if="questions!=null">
        <div v-for="(question,index) in questions">
            <div v-if="question.paperQuestionBank==1">
                <label>{{question.paperQuestionNumber}}.</label>
                <label>
                    {{question.paperDetailQuestion.selectTopic}}({{question.paperDetailQuestion.selectPoint}}分)( )<br>
                </label>
                <div>
                    A. {{question.paperDetailQuestion.selectOptionsa}}<br>
                    B. {{question.paperDetailQuestion.selectOptionsb}}<br>
                    C. {{question.paperDetailQuestion.selectOptionsc}}<br>
                    D. {{question.paperDetailQuestion.selectOptionsd}}<br>
                </div>
            </div>
            <br>
            <div v-if="question.paperQuestionBank==2" class="form-group">
                <label>{{question.paperQuestionNumber}}.</label>
                <label>
                    {{question.paperDetailQuestion.vacancyTopic}}
                </label><br>
                <div>
                    <input type="text" class="vacancy form-control">
                </div>
            </div>
            <br>
            <div v-if="question.paperQuestionBank==3">
                <label>{{question.paperQuestionNumber}}.</label>
                <label>
                    {{question.paperDetailQuestion.materialReading}}
                </label><br>
                <div v-if="question.paperDetailQuestion.selectBanks!=null">
                    <div v-for="(select,index) in question.paperDetailQuestion.selectBanks">
                        <label>
                            {{select.selectTpoic}}( )<br>
                        </label>
                        <div>
                            A. {{select.selectOptionsa}}<br>
                            B. {{select.selectOptionsb}}<br>
                            C. {{select.selectOptionsc}}<br>
                            D. {{select.selectOptionsd}}<br>
                        </div>
                        <br>
                    </div>
                    <br>
                </div>
                <div v-if="question.paperDetailQuestion.vacancyBanks!=null">
                    <div v-for="(vacancy,index) in question.paperDetailQuestion.vacancyBanks">
                        <label>
                            {{vacancy.vacancyTopic}}
                        </label><br>
                        <div>
                            <input type="text" class="vacancy form-control">
                        </div>
                        <br>
                    </div>

                </div>
                <div v-if="question.paperDetailQuestion.judgeBanks!=null">
                    <div v-for="(judge,index) in question.paperDetailQuestion.judgeBanks">
                        {{judge.judgeTopic}}
                        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        (&nbsp;&nbsp;&nbsp;&nbsp;)
                    </div>
                </div>
            </div>
            <br>
            <div v-if="question.paperQuestionBank==4">
                <label>
                    {{question.paperQuestionNumber}}({{question.paperDetailQuestion.clozePoint}}分).
                    {{question.paperDetailQuestion.clozeTopic}}<br>
                </label>
                <div v-for="(clozeSelect,index) in question.paperDetailQuestion.clozeSelects">
                    {{index+1}}.(&nbsp;&nbsp;&nbsp;&nbsp;)&nbsp;&nbsp;&nbsp;&nbsp;
                    A. {{clozeSelect.selectOptionsa}}&nbsp;&nbsp;&nbsp;&nbsp;
                    B. {{clozeSelect.selectOptionsb}}&nbsp;&nbsp;&nbsp;&nbsp;
                    C. {{clozeSelect.selectOptionsc}}&nbsp;&nbsp;&nbsp;&nbsp;
                    D. {{clozeSelect.selectOptionsd}}&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </div>
            <br>
            <div v-if="question.paperQuestionBank==6">
                <label>{{question.paperQuestionNumber}}.</label>
                <label>
                    {{question.paperDetailQuestion.judgeTopic}}
                </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                (&nbsp;&nbsp;&nbsp;&nbsp;)

            </div>
            <br>
            <div v-if="question.paperQuestionBank==7">
                <h6>{{question.paperQuestionNumber}}.作文，根据下列材料写作：</h6>
                <label>
                    {{question.paperDetailQuestion.writerTopic}}
                </label><br>
                <textarea>
                    </textarea>

            </div>
            <br>
        </div>
    </div>
</div>
<script>
    var paperQuestion = new Vue({
        el: "#app",
        data: {
            questions: [],
        },
        mounted() {
            var paperid = window.location.href.split("=")[1];
            console.log(paperid);
            axios.get("../getPaper/paper/" + paperid).then(
                res => {
                    this.questions = res.data.paperQuestions;
                    console.log(this.questions);
                    for (const question of this.questions) {
                        console.log(question);
                    }
                }
            ).catch(error => {
                console.log(error);
            })
        },
    })
</script>
</body>
</html>